<template>
    <div class="cart">
            <div class="commit">
            <!-- 顶部 -->
                <van-row>
                    <van-col span="8" class="top_tui"><van-icon name="checked" />30天无忧退货</van-col>
                    <van-col span="8" class="top_tui"><van-icon name="checked" />48小时快速退费</van-col>
                    <van-col span="8" class="top_tui"><van-icon name="checked" />满88元免邮费 </van-col>
                </van-row>
            <!-- /顶部 -->
            <!-- 空购物车 -->
            <van-empty v-if="cartList.length == 0"
                class="custom-image empty_icon"
                image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
                description="购物车为空"
            />
            <!-- /空购物车 -->
            <!-- 商品 -->
                <van-swipe-cell v-for="(v,k) in cartList" :key="k">
                    <van-checkbox v-model="v.checked" @click="onClick(v.checked,v.product_id)" class="checkbox" :disabled="ckeck"></van-checkbox>
                    <van-card
                        :num="v.number"
                        :price="v.market_price.toFixed(2)"
                        :title="v.goods_name"
                        class="goods-card"
                        :thumb="v.list_pic_url"
                    >
                        <template #footer>
                            <van-stepper v-model="v.number" theme="round" button-size="22" disable-input v-if="step_show" @change="step_cahnge(v.number,v.id,v.goods_id,v.product_id)" />
                        </template>
                    </van-card>
                    <template #right>
                        <van-button square text="删除" type="danger" class="delete-button" @click="del_goods(v.product_id)" />
                    </template>
                </van-swipe-cell>
                
            <!-- /商品 -->
            </div>
            <van-submit-bar :price="checkedGoodsAmount * 100" button-text="立即购买" @submit="onSubmit" >
                <van-checkbox v-model="checked" :disabled="ckeck" @click="checkAll(checked)" ref="ckeck" >全选</van-checkbox>
                <template #tip>
                     累计共{{cartTotal.checkedGoodsCount}}件商品，可点击  <span class="change_address" @click="onClickEditAddress()" ref="edit">编辑</span> 按钮进行商品数量修改 
                </template>
            </van-submit-bar>
    </div>
</template>

<script>
import {cart_index,cart_checked,cart_update,cart_delete} from '../request/home.js'
import { Toast } from 'vant';
export default {
    name: 'Wjm0714Cart',

    data() {
        return {
            checked:'',
            cartList:[],
            isChecked:'',
            cartTotal:{},
            step_show:false,
            ckeck:false,
            checkedGoodsAmount:''
        };
    },

    mounted() {
        
    },

    methods: {
        // 删除商品
        del_goods(v){
            cart_delete({
                productIds:String(v)
            })
            .then(res=>{
                this.cartList = res.data.data.cartList;
                this.cartTotal = res.data.data.cartTotal;
                this.checkedGoodsAmount = res.data.data.cartTotal.checkedGoodsAmount;
                if (this.cartList.length == 0) {
                    this.checked = false;
                    this.ckeck = true;
                }
            })
            .catch(err=>{
                console.log(err);
            })
        },
        // 步进器
        step_cahnge(number,id,goodsId,productId){
            // 编辑商品
            cart_update({
                goodsId,
                id,
                number,
                productId
            })
            .then(res=>{
                // console.log(res);
                this.cartList = res.data.data.cartList;
                this.cartTotal = res.data.data.cartTotal;
                this.checkedGoodsAmount = res.data.data.cartTotal.checkedGoodsAmount;
            })
            .catch(err=>{
                console.log(err);
            })
        },
        // 提交
        onSubmit(){
            console.log('提交');
        },
        // 编辑
        onClickEditAddress(){
            this.ckeck = true;
            if (this.$refs.edit.innerText == '编辑') {
                this.step_show = true;
                this.$refs.edit.innerText = "退出编辑"
            }else{
                this.step_show = false;
                this.$refs.edit.innerText = "编辑";
                this.ckeck = false;
            }
        },
        // 点击复选框
        onClick(v,id){
                v = v?1:0;
                cart_checked({
                    isChecked:v,
                    productIds:id
                })
                .then(res=>{
                    this.cartList = res.data.data.cartList;
                    this.cartTotal = res.data.data.cartTotal;
                    this.checkedGoodsAmount = res.data.data.cartTotal.checkedGoodsAmount;
                    for (let i = 0; i <  res.data.data.cartList.length; i++) {
                        if (res.data.data.cartList[i].checked != 1) {
                            this.checked = false;
                            this.check = true;
                            return
                        }
                    }
                    this.checked = true;
                })
                .catch(err=>{
                    console.log(err);
                })
        },
        // 全选
        checkAll(v){
            if (this.step_show) {
                    return 
                }
            v = v?1:0;
            let product_id = [];
            for(let i = 0; i<this.cartList.length ; i++){
                product_id.push(this.cartList[i].product_id);
            }
            product_id = product_id.join(',');
            cart_checked({
                isChecked:v,
                productIds:product_id
            })
            .then(res=>{
                this.cartList = res.data.data.cartList;
                this.cartTotal = res.data.data.cartTotal;
                this.checkedGoodsAmount = res.data.data.cartTotal.checkedGoodsAmount;
            })
            .catch(err=>{
                console.log(err);
            })
               
        }
        
    },
    created(){
        // 加载
        Toast.loading({
            message: '加载中...',
            forbidClick: true,
            loadingType: 'spinner',
        });
        // 获取购物车商品
        cart_index()
        .then(res=>{
            // 购物车商品列表
            this.cartTotal = res.data.data.cartTotal;
            this.cartList = res.data.data.cartList;
            this.checkedGoodsAmount = res.data.data.cartTotal.checkedGoodsAmount;
            if (!res.data.data.cartList.length) {
                this.checked = false;
                this.ckeck = true
            }else{
                for (let i = 0; i <  res.data.data.cartList.length; i++) {
                    if (res.data.data.cartList[i].checked == 0) {
                        this.checked = false;
                        this.check = true;
                        return
                    }
                }
            this.checked = true;
            this.check = ture;
            }
        })
        .catch(err=>{
            console.log(err);
        })
    },
};
</script>

<style lang="less" >
    .cart{
        position: relative;
        top: 0%;
    }
    .van-submit-bar{
        bottom: .5rem;
    }
    .custom-image .van-empty__image {
        width: 1.6rem;
        height: 1.6rem;
    }
    .empty_icon{
       margin-top: 50%;
       transform: translate(0,-50%);
    }
    .top_tui{
        font-size: .13rem ;
        font-family: 黑体;
        height: .3rem;
        line-height: .3rem;
        text-align: center;
        color: #333;
    }
    .van-icon-checked{
        color: darkred;
        padding: .05rem;
    }
    // 购物车商品
    .goods-card {
        margin: 0;
        background-color: #fff;
    }

    .delete-button {
        height: 100%;
    }

    // 商品信息
    .van-swipe-cell__wrapper{
        display: flex;
        flex-wrap: nowrap;
        background-color: #fff;
        border-bottom: 1px solid #999;
    }
    .goods-card{
        width: 100%;
    }
    // 多选按钮
    .checkbox{
        width: 10%;
        padding: 0% .1rem;
    }
    // 商品标题
    .van-card__title{
        color: #323233;
        font-size: .18rem;
        font-family: 黑体;
        margin-top: .2rem;
    }
    // 商品区
    .commit{
        margin-bottom: 1.34rem;
    }
    // 编辑
    .change_address{
        background-color: lightblue;
        padding: .05rem .07rem;
    }
</style>